<template>
    <div>
        <Child v-for="item in goods" :key="item.id" :item="item" @change-price="changePrice"></Child>
    </div>
</template>

<script setup>
/**
 * 父传子
    * 作用：实现组件通信中的父传子组件通信
    * 使用：
        * 父组件提供数据
        * 父组件将数据传递给子组件
        * 子组件通过 defineProps 接收数据
        * 子组件渲染父组件传递过来的数据
 * 子传父
    * 作用：实现组件通信中的子传父组件通信
    * 使用：
        * 1、子组件通过 defineEmits 获取 emit 函数
            * const emit = defineEmits()
            * const emit = defineEmits(['change-xxx']) // 显示的声明事件名称
        * 2、子组件通过 emit 函数触发事件，并且传递数据
        * 3、父组件中提供方法
        * 4、父组件通过自定义事件的方法为子组件注册事件
 */

// 导入Child组件
import Child from './components/Child.vue';
// 导入ref函数
import { ref } from 'vue'

// 父组件模拟数据
let goods = ref([
    { id: 1, goodsname: '西瓜', price: 10 },
    { id: 2, goodsname: '苹果', price: 15 },
    { id: 3, goodsname: '香蕉', price: 20 }
])
// 定义修改价格的方法
const changePrice = (id) => {
    // 通过id查找要修改价格的数据
    let res = goods.value.find(item => item.id === id)
    // 修改价格
    res.price--
}
</script>

<style lang="scss" scoped></style>